<template>
  <a-input-group style="width:100%;" compact>
    
    <a-select 
      style="width: 30%" 
      showSearch
      allowClear
      :disabled="disabled"
      :filterOption="filterOption"
      :placeholder="placeholder"
      :value="seletedValue"
      @change="handleChange" 
    >
      <a-select-option
        v-for="(item) in lists"
        :key="item.pid">
          {{ item.addr}}
        <!-- {{item.contact}}({{ item.addr}}) -->
      </a-select-option>
    </a-select>
    <a-input style="width:70%" placeholder="请输入地址" v-model="seletedValue"  />
  </a-input-group>
</template>

<script>
import { getByConditions } from './deliveryAddress'

export default {
  name: 'deliveryAddressSelect',
  props: {
    placeholder: {
      default: '选择配送地址',
      required: false,
      type: String
    },
    disabled: {
      default: false,
      required: false,
      type: Boolean
    },
    value: {
      default: '',
      required: false,
      type: String
    }
  },
  data () {
    return {
      record:{addr:null},
      lists: [],
      seletedValue: (this.value == '' || this.value === null) ? undefined : this.value,
    }
  },
  computed: {
    placeholderShow() {
      return this.placeholder
    }
  },
  created () {
    this.initDictData()
  },
  methods: {
    initDictData () {
      const pagination = {
        pageSize: 1000000,
        current: 1
      }
      const headers = {
        authOption: '1'
      }
      getByConditions({}, pagination, headers).then(r => {
        if (r && r && r.code === 'C1' && r.data) {
          console.log(r.data);
          this.lists = r.data
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    handleChange (val) {
      console.log(val,this.lists);
      // if (val !== undefined) {
        let record=this.lists.find(item=>{
          return item.pid==val
        })
        console.log(val,record);
        if (record) {
          this.record=record
          this.seletedValue=record.addr
        }
        
        this.$emit('change', val,record)
      // }
      // this.$emit('dataChanged', val)
    }
  },
  watch: {
    value: function () {
      this.seletedValue = (this.value == '' || this.value === null) ? undefined : this.value
    },
    seletedValue(val){
      let re=JSON.parse(JSON.stringify(this.record))
      re.addr=val
      this.$emit('change',val,re)
    }
  }
}
</script>
